<!--<template>-->
<!--    <header>-->
<!--        <div>-->
<!--            <h1 style="margin-top: -10px;color: #425049;font-size:30px; ">欢迎来到编程界明世隐的Vue项目</h1>-->
<!--        </div>-->
<!--        <div class="opt-wrapper">-->
<!--            <el-dropdown :hide-on-click="false">-->
<!--                <div class="demo-basic&#45;&#45;circle">-->
<!--                    <div class="block">-->
<!--                        <el-avatar :size="40" :src="avatar" :class="['avatar-info']">-->
<!--                        </el-avatar>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <el-dropdown-menu slot="dropdown" style="margin-top:-30px;margin-left: -30px;">-->
<!--                    <el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item>-->
<!--                    <el-dropdown-item><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--        </div>-->
<!--    </header>-->
<!--</template>-->

<!--<script>-->
<!--    export default {-->
<!--        name: "Header",-->
<!--        data() {-->
<!--            return {-->
<!--                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->
<!--    header {-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--        justify-content: space-between;-->
<!--        color: #fff;-->
<!--    }-->
<!--    /*设定头像图片样式*/-->
<!--    .avatar-info {-->
<!--        margin-top: 10px;-->
<!--        margin-right: 40px;-->
<!--        cursor: pointer;-->
<!--    }-->
<!--</style>-->
<template>
    <div class="header">
        <el-header>
            <div class="title">后台管理系统</div>
            <div class="opt-wrapper">
                <el-dropdown :hide-on-click="false">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar :size="40" :src="avatar" class="avatarinfo">
                            </el-avatar>
                        </div>
                    </div>
                    <el-dropdown-menu slot="dropdown" style="margin-top:-30px;margin-left: -30px;">
<!--                        <el-dropdown-item><i class="el-icon-info"></i>个人中心</el-dropdown-item>-->
                        <el-dropdown-item @click.native="logoutUser"><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
<!--            <div>{{name}}</div>-->
        </el-header>
    </div>
</template>
<script>

    import {logout} from "../../../api/api";
    import {removeToken} from "../../../utill/Token";

    export default {
        data() {
            return {
                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                name: ''
            }
        },
        created() {
        },
        methods:{
                logoutUser(){
                    logout().then((res) => {
                        if (res.data.status === 200) {
                            removeToken("admin_token");
                            this.$router.push({path: '/auth'});
                        }
                    });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .header {
        .el-header {
            background: #2578b5;
            color: #fff;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .title {
                width: 200px;
                font-size: 24px;
            }
        }
    }
    .avatarinfo {
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }
</style>
